<script setup lang="ts">
    
</script>

<template>
  <div class="myPersonalCardContainer">
      <div class="card-list">
          <span class="iconfont icon-wodeguanzhu"></span>
          <div class="right">
              <span class="list-name">我的关注</span>
              <span style="float:right;">0 ></span>
          </div>
      </div>
      <div class="card-list">
          <span class="iconfont icon-bofanggedan"></span>
          <div class="right">
              <span class="list-name">歌单</span>
              <span style="float:right;"> ></span>
          </div>
      </div>
      <div class="card-list">
          <span class="iconfont icon-tougao"></span>
          <div class="right">
              <span class="list-name">投稿</span>
              <span style="float:right;"> ></span>
          </div>
      </div>
      <div class="card-list">
          <span class="iconfont icon-shezhi"></span>
          <div class="right">
              <span class="list-name">设置</span>
              <span style="float:right;"> ></span>
          </div>
      </div>
  </div>
</template>

<style lang="less" scoped>
.myPersonalCardContainer {
    margin-top: 15px;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 30px;
    margin-bottom: 80px;
    background-color: #fff;
    .card-list {
        margin-top: 25px;
        display: flex;
        .iconfont {
            font-size: 22px;
        }
        .right{
            width: 100%;
            margin-left: 10px;
            margin-right:20px;
            padding-bottom: 15px;
            line-height: 22px;
            border-bottom:1px solid #dbdbdb;
            .list-name{
                font-size: 15px;
            }
        }
    }
}
</style>